<template>
  <div
    class="flex items-center justify-center w-full h-screen bg-no-repeat bg-cover login"
  >
    <div
      class="flex items-center justify-center w-1/3 transform bg-opacity-50 opacity-90 h-2/3 bg-gradient-to-br from-indigo-400 to-blue-500 rotate-6 rounded-xl"
    >
      <a-form
        class="flex flex-col justify-center w-full h-full transform rounded-xl -rotate-6 bg-yellow-50"
        name="login"
        :model="loginForm"
        :rules="loginRules"
        autocomplete="off"
        :wrapperCol="formWrapperCol"
        ref="loginFormRef"
      >
        <a-form-item
          has-feedback
          v-for="(_, key) in loginForm"
          :key="key"
          :name="key"
        >
          <a-input
            class="flex rounded item-center hover:border-purple-400 focus:ring-1 focus:ring-purple-500"
            v-model:value="loginForm[key]"
            :type="key === 'password' ? 'password' : 'text'"
            :placeholder="key"
          ></a-input>
        </a-form-item>
        <a-form-item class="relative">
          <button
            class="login-btn-style login-btn-transition"
            @click="handleLogin"
          >
            Submit
          </button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ValidateErrorEntity } from "ant-design-vue/es/form/interface"
import type {LoginFormState} from '@/interface/user'
import { reactive, ref } from "vue"
import {login} from '@/api/user'
import { message } from "ant-design-vue"
import {userUserStore} from '@/store/modules/user'
import {useRouter} from 'vue-router'
import {goToPermissionPage} from '@/router/guard'

const userStore = userUserStore()
const router = useRouter()

const loginFormRef = ref()

const loginForm = reactive<LoginFormState>({
  account: "",
  password: "",
})
const loginRules = {
  account: [{ required: true, message: "账户不能为空", trigger: "change" }],
  password: [{ required: true, message: "密码不能为空", trigger: "change" }],
}

const formWrapperCol = {
  span: 12,
  offset: 6,
}

const handleLogin = () => {
  loginFormRef.value
    .validate()
    .then(async () => {
      const {data:{data}} = await login(loginForm)
      if(data.loginMessage === 'success') {
        message.success('登录成功！')
        userStore.role = data.u_role
        sessionStorage.setItem('role', userStore.role)
        sessionStorage.setItem('uid',data.id)
        goToPermissionPage(router,userStore.role)
      } else {
        message.error('登录失败！')
      }
    })
    .catch((error: ValidateErrorEntity<LoginFormState>) => {
      message.info('请正确输入账号密码')
      return false
    })
}
</script>

<!-- 处理antd样式 -->
<style>
.ant-form-item-children-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<style scoped>
.login-btn-style {
  @apply absolute w-16 h-10 font-mono transform -translate-x-1/2 bg-blue-300 rounded top-2 left-1/2 focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 focus:outline-none hover:scale-110 hover:opacity-100 opacity-90;
}
.login-btn-transition {
  @apply transition-transform duration-200 ease-out;
}
.login {
  background-image: url("../../assets/bg.jpg");
}
</style>
